<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>请假申请</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/style.css">
    <style>
        * {
            font-size: 14px;
        }

    </style>
</head>

<body>

<div class="x-body">
    <form action="" class="layui-form ">

        <div class="people-Occupation tl2">
            <ul class="tl7">
                <li>姓名：<span>张三</span></li>
                <li>部门：<span>男</span></li>
                <li>职位：<span>市场专员</span></li>
            </ul>
            <ul class="tl7">
                <li>报销类型：<span>已垫付</span></li>
                <li style="width: 300px">报销公司：<span>南京课窝教育科技有限公司</span></li>
            </ul>
            <ul class="tl7">
                <li>用途一：<span>餐饮</span></li>
                <li>金额：<span>88元</span></li>
            </ul>
            <ul class="tl7">
                <li>合计金额：<span>88元</span></li>
                <li>人民币<span>八十八元</span></li>
            </ul>
            <ul class="tl7">
                <li>报销事由：<span>加班晚餐报销</span></li>
            </ul>
        </div>

        <div class="  tl2">
            <span class="left tl2 tx-time">报销凭证：</span>

            <div class="left upimg bximgshow">
                <div class="left"> <img src="images/bingli.png" alt=""> <div><img src="images/big.png" alt="" class="big"><img
                        src="images/down.png" alt="" class="down"></div></div>
                <div class="left"> <img src="images/bingli.png" alt=""> <div><img src="images/big.png" alt="" class="big"><img
                        src="images/down.png" alt="" class="down"></div></div>
            </div>
        </div>


        <div class="clear"></div>

        <div class="layui-form-item">
            <button class="layui-btn ok" lay-filter="add" lay-submit="" style="margin-left:200px">
                提交
            </button>
            <button class="layui-btn layui-btn-primary" lay-filter="add" lay-submit="" style="margin-left:100px">
                取消
            </button>
        </div>
    </form>
</div>

<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script>
    $(".bximgshow>div").mouseover(function () {
        $(this).children("div").show()
    }).mouseleave(function () {
        $(this).children("div").hide()
    })
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;
        //图片弹出
        $(".big").click(function () {
          var src=  $(this).parent().siblings("img").attr('src')
            var img = "<img src='" + src + "'>";
            layer.open({
                type: 1,
                shade: false,
                title: false, //不显示标题
                //area:['600px','500px'],
                area: [img.width + 'px', img.height + 'px'],
                content: img, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        });

    });
</script>

</body>

</html>